<template>
  <div class="mylife">
    <!-- 头部banner -->
    <hdbanner></hdbanner>
    <!-- 内容 -->
    <div class="body">
      <div class="timeing">
        <el-timeline>
          <el-timeline-item v-for="(item, index) in myLife" :key="'myLife'+index" :timestamp="$moment(item.date, 'YY-MM-DD')" placement="top">
            <el-card>
              <!-- 添加题目 -->
              <div class="cardTitle">{{ item.title }}</div>
              <showMark :text="item.content"></showMark>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script>

import hdbanner from "@/components/hdbanner";
import showMark from "@/components/showMark";
import { getMyLife } from '@/api'
export default {
  name: 'mylife',
  components: {
    hdbanner,
    showMark
  },
  data() {
    return {
      myLife: [],
    }
  },
  mounted() {
    getMyLife().then((res) => {
      this.myLife = res.data.results
    })
  }
}
</script>

<style lang="less">
.el-timeline-item .el-timeline-item__wrapper {
  position: relative;
  padding: 0 100px 30px;

  .el-timeline-item__timestamp {
    line-height: 50px;
    font-size: 22px;
    font-weight: 500;
    color: rgb(8, 151, 156);
  }

  .el-card__body {
    cursor: pointer;
  }
}
</style>
<style lang="less" src="./index.less" scoped></style>